<template>
  <div>
    <div v-if="loading">加载中...</div>
    <ul>
      <li v-for="user in data?.list" :key="user.id">
        {{ user.name }}
      </li>
    </ul>

    <div>
      <button
        @click="pagination.changeCurrent(pagination.current - 1)"
        :disabled="pagination.current <= 1"
      >
        上一页
      </button>
      <span>第 {{ pagination.current }} 页 / 共 {{ pagination.total }} 条</span>
      <button @click="pagination.changeCurrent(pagination.current + 1)">
        下一页
      </button>
    </div>
  </div>
</template>

<script setup>
import { useRequest } from "vue-request";
import axios from "axios";
import {User,UserListResponse} from '../../model/UserPlus.ts';

const fetchUsers = ({ current, pageSize }): Promise<UserListResponse> => {
  return axios.get('/api/users', {
    params: {
      page: current,
      pageSize
    }
  }).then(res => ({
    list: res.data.items,
    total: res.data.total
  }));
};

export const useUserList = () => {
  return useRequest<UserListResponse>(fetchUsers, {
    pagination: true
  });
};

const { data, loading, pagination } = useUserList()


</script>
